const path = require('path')
const uglify = require('uglifyjs-webpack-plugin') // js压缩
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require('extract-text-webpack-plugin') // css分离
const PurifyCSSPlugin = require('purifycss-webpack') // PurifyCSS减少CSS冗余，PurifyCSS-webpack要依赖于purify-css包
const glob = require('glob') // 需要同步检查html模板，所以引入node环境下的glob对象

const website = {
  publicPath: "http://localhost:8888/",
  // publicPath: '../'
}
module.exports = {
  mode: 'development',
  // 入口配置
  entry: {
    // 写入口文件
    main: './src/main.js',
    // main2: './src/main.js'
  },
  // 出口配置
  output: {
    path: path.resolve(__dirname, '../dist'), // 打包路径
    filename: '[name].bundle.js', // 文件名
    publicPath: website.publicPath // 静态资源路径!
  },
  // 将es6,7,sass/less,css,img,各种资源编译打包压缩为js文件中的依赖的各种loader
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              // ['@babel/preset-env', {
              //   targets: {
              //   browsers: ['> 1%', 'last 2 versions']
              //   }
              // }]
            ]
          }
        },
        exclude: '/node_modules/'
      },
      {
        test: /\.css$/,
        use:
        // [
          extractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader",
            { loader: 'postcss-loader', options: {
                plugins: [
                  require("autoprefixer") /*在这里添加配置，或在postcss.conf.js文件添加*/
                ]
              }
            }
          ]
          }),
          // 'style-loader',
          // 'css-loader',
          // { loader: 'postcss-loader', options: {
          //     plugins: [
          //       require("autoprefixer") /*在这里添加配置，或在postcss.conf.js文件添加*/
          //     ]
          //   }
          // }
        // ]
      },
      {
        test: /\.scss$/,
        use:
        extractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", {
            loader: 'sass-loader'
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require("autoprefixer") /*在这里添加配置，或在postcss.conf.js文件添加*/
              ]
            }
          }]
        }),
        // [
        //   'style-loader',
        //   'css-loader',
        //   { loader: 'sass-loader' },
        //   'postcss-loader'
        // ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 500, //是把小于500B的文件打成Base64的格式，写入JS,大于的url-loader会调用file-loader进行处理，参数会直接传给file-loader进行copy
              outputPath: 'images/', //打包后的图片放到images文件夹下
            }
          }
        ]
      },
      {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      }
    ]
  },
  // 插件: 用于压缩js、html、编译提取css并purity...
  plugins: [
    new uglify(),
    new HtmlWebpackPlugin({
      minify: { //是对html文件进行压缩
        removeAttributeQuotes: true //removeAttrubuteQuotes是却掉属性的双引号。
      },
      hash: true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS和css资源缓存。
      template: './src/index.html' //是要打包的html模版路径和文件名称。
    }),
    // new extractTextPlugin("css/index.css"), //这里的/css/index.css 是分离后的路径
    // 先purity后extract
    new PurifyCSSPlugin({
      // 使用这个插件必须配合extract-text-webpack-plugin这个插件
      //这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
      paths: glob.sync(path.join(__dirname, '../src/*.html'))
    }),
    new extractTextPlugin("css/index.css"), //这里的/css/index.css 是分离后的路径
  ],
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'), //devServer服务的文件读取路径
    host: 'localhost', // 服务所在的服务器ip
    compress: true, // 是否开启服务端压缩
    port: 8888
  }
}